<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list msg-list-item" scroll-y="true" style="height: 100vh;" @scrolltolower="loadMore">
			<view v-for="(item, idx) in showList" :key="idx">
				<view class="list-item-card" @click="navToForm(item)">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-footer">
						<view class="card-tag" :style="{ backgroundColor: getTagBgColor(item.gwTypeName), color: getTagTextColor(item.gwTypeName) }">{{ item.gwTypeName }}</view>
						<view class="card-date">{{ item.createTime }} 发布</view>
						<view class="card-button" @click.stop="navToForm(item)">
							{{ status === 1 ? '处置' : '查看' }}
						</view>
					</view>
				</view>
			</view>
			<u-divider v-if="finished">已经到底了</u-divider>
			<u-loading v-if="loading" />
		</scroll-view>
		<view class="footer-tags">
			<button
				:class="['footer-switch-btn', status === 1 ? 'active' : '']"
				@click="switchStatus(1)"
			>待办任务</button>
			<button
				:class="['footer-switch-btn', status === 2 ? 'active' : '']"
				@click="switchStatus(2)"
			>已办任务</button>
		</view>
	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	import {
		checkLogin
	} from '@/common/auth.js';
	export default {
		data() {
			return {
				keywords: '',
				showList: [], // 当前显示的数据
				pageNo: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				status: 1, // 1=待办，2=已办
			};
		},
		onLoad() {
			if (!checkLogin()) {
				return;
				// 如果未登录，直接返回
			}
			this.loadData();
		},
		methods: {
			search() {
				// 点击搜索按钮时重置列表并重新加载数据
				this.pageNo = 1;
				this.showList = [];
				this.finished = false;
				this.loadData();
			},
			switchStatus(newStatus) {
				if (this.status !== newStatus) {
					this.status = newStatus;
					this.pageNo = 1;
					this.showList = [];
					this.finished = false;
					this.loadData();
					// 设置导航栏标题
					uni.setNavigationBarTitle({
						title: newStatus === 1 ? '待办任务' : '已办任务'
					});
				}
			},
			getTagBgColor(gwType) {
				const colorMap = {
					'防办发文流程': '#ECF5FF',
					'收文流程': '#ECF5FF',
					'外出报告单': '#ECF5FF',
					'党组发文': '#ECF5FF',
					'安全生产委员会发文': '#ECF5FF',
					'公务员考核': '#ECF5FF',
					'传真电报': '#ECF5FF',
					'工会发文流程': '#ECF5FF',
					'发文流程': '#ECF5FF',
				};
				return colorMap[gwType] || '#ECF5FF'; // Default light gray
			},
			getTagTextColor(gwType) {
				const colorMap = {
					'防办发文流程': '#409EFF',
					'收文流程': '#409EFF',
					'外出报告单': '#409EFF',
					'党组发文': '#409EFF',
					'安全生产委员会发文': '#409EFF',
					'公务员考核': '#409EFF',
					'传真电报': '#409EFF',
					'工会发文流程': '#409EFF',
					'发文流程': '#409EFF',
				};
				return colorMap[gwType] || '#409EFF'; // Default gray
			},
			navToForm(item) {
				const allowedTypes = [
					'公文发文',
					'党组发文',
					'会议纪要',
					'公文收文',
					'呈报件',
					'请示件',
					'外出报告单',
					'山东黄河河务局机关工会',
					'防汛抗旱会议纪要',
					'山东黄河工会发文',
					'工会发文',
					'发文流程',
					'工会发文流程',
					'传真电报',
					'收文流程',
					'防办发文流程',
					'安全生产委员会发文',
					'来宾报告单',
					'来宾报告'
				];
				const keywords = ['发文', '收文'];
				const name = item.gwTypeName || '';
				const isAllowed = allowedTypes.includes(name) || keywords.some(k => name.includes(k));
				if (!isAllowed) {
					uni.showToast({
						title: '不支持类型，请在PC端操作',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.setStorageSync('taskId', item.id);
				uni.setStorageSync('bizKey', item.bizKey);
				uni.navigateTo({
					url: `/pages/sys/msg/form?isFw=${item.isFw}&gwType=${item.gwType}&id=${item.id}&readonly=${this.status === 2 ? 1 : 0}`
				});
			},
			async loadData() {
				if (this.loading || this.finished) return;
				
				this.loading = true;
				try {
					//调用获取待办列表
					const response = await this.$u.api.getDaibanList({
						__sid: uni.getStorageSync('sessionid'),
						'x-remember': uni.getStorageSync('x-remember'),
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						'procIns.name':this.keywords,
						status: this.status
					});
					
					if (response && response.data && response.data.count > 0) {
						// 处理返回的数据
						const processedList = response.data.list
							.map(item => {
								// 解析title中的内容
								const titleMatch = item.title.match(/\[(.*?)\](.*?)\[(.*?)\]/);
								if (titleMatch) {
									return {
										...item,
										gwTypeName: titleMatch[1], // 第一个[]中的内容
										title: titleMatch[2].trim(), // 中间的内容
										createTime: titleMatch[3], // 第二个[]中的内容
										isFw: item.isFw, // 使用接口返回的isFw字段
										gwType: item.gwType // 使用接口返回的isFw字段
									};
								}
								return item;
							})
							// .filter(item => item.gwType !== 'gwfw'); // 过滤掉gwType为gwfw的项
						
						this.showList = (this.showList || []).concat(processedList);
						this.pageNo++;
					} else {
						this.finished = true;
					}
				} catch (error) {
					uni.reLaunch({
						url: '/'
					});
				} finally {
					this.loading = false;
				}
			},
			loadMore() {
				this.loadData();
			}
		}
	};
</script>
<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
		padding: 20rpx 30rpx; /* Increased padding for search bar */
		margin-bottom: 20rpx; /* Add margin below search bar */
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.scroll-list {
		height: calc(100vh - 140rpx); /* Adjust height for search bar + its margin */
		padding-top: 20rpx; /* Add padding to the top of the scroll list */
	}

	.list-item-card {
		background-color: #ffffff;
		border-radius: 5rpx;
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.08); /* Slightly more prominent shadow */
		margin: 0 20rpx 20rpx 20rpx; /* Adjusted margin for consistency */
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}

	.card-footer {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Align items to the start initially */
		flex-wrap: wrap; /* Allow items to wrap if space is limited */
	}

	.card-tag {
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.card-date {
		font-size: 24rpx;
		color: #909399;
		margin-right: auto; /* Push the button to the right */
		text-align: center; /* Center the text */
		flex-grow: 1; /* Allow it to take up available space */
	}

	.card-button {
		background-color: rgb(0, 137, 217);
		color: #ffffff;
		padding: 12rpx 28rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		cursor: pointer;
		/* Ensure button is not stretched */
		flex-shrink: 0;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 10px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}

	.footer-tags {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 18rpx 0 22rpx 0;
		background: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(64,158,255,0.06);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		gap: 8rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.footer-switch-btn {
		font-size: 28rpx;
		padding: 0 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 0;
		font-weight: 500;
		min-width: 120rpx;
		text-align: center;
		border: none;
		background: #f2f3f5;
		color: #409EFF;
		transition: all 0.2s;
		outline: none;
		box-shadow: none;
		cursor: pointer;
	}
	.footer-switch-btn.active {
		background: #409EFF;
		color: #fff;
		border: none;
		box-shadow: none;
	}
	.footer-switch-btn:active {
		opacity: 0.85;
	}
</style>